<template>
  <view class="login-container">
    <!-- logo --> 
      <view class="avatar-container">
        <image class="avatar" src="/static/brick.png" mode="aspectFit"></image>
      </view> 
    <view class="input-container">
      <span class="send-button">手机号码</span>
      <input type="text" placeholder="请输入手机号码" class="input-phone" v-model="user.phone"/>
    </view>
    <view class="input-container">
      <input type="text" placeholder="请输入验证码" class="input-verify-code" v-model="user.verifyCode"/>
      <span class="send-button" @click="sendCode">发送验证码</span>
    </view>
  </view>
  <view>
    <button class="login-button" @click="login">登录</button>
    <text class="back-text" @click="goBack">暂不登录</text>
  </view>
</template>

<script> 

export default {
  data() {
    return {
      accessToken:'',
      refreshToken:'',
      user: {
        verifyCode: '',
        phone: '',
        avatarUrl: "/static/brick.png",
        nickName: "",
        code: ''
      },
    };
  },
  onLoad() {
    uni.showToast({
      title: "登录过期,请重新登录",
      icon: "none",
    });
  },
  methods: {
    login() {
      let _this=this;
      uni.request({
        url: 'http://localhost:8080/app/login', // 你的登录接口地址
        method: 'POST',
        data: this.user,
        success: (res) => {
          console.log("res:", res);
          console.log("data:", res.data);
          if (res.statusCode === 200) {
            uni.setStorageSync("user", res.data.data.user); 
            uni.setStorageSync("access_token", res.data.data.access_token);
            uni.setStorageSync("refresh_token", res.data.data.refresh_token);
            this.accessToken=res.data.data.access_token;
            this.refreshToken=res.data.data.refresh_token;
            const params = {
              "name": "未命名会话",
              "is_example": false,
              "enter_method": "new_chat",
              "kimiplus_id": "kimi"
            };
            uni.request({
              url: 'https://kimi.moonshot.cn/api/chat',
              method: 'POST',
              data: params,
              header: {Authorization: `Bearer ${_this.accessToken}`},
              success(res) {
                if (res.statusCode == 200) {
                  uni.setStorageSync("chatId", res.data.id); 
                  // 返回
                  uni.switchTab({url: '/pages/search/search'});
                }
              }

            })
          } else {
            uni.showToast({
              title: "登录失败,请重新输入",
              icon: "none",
            });
          }
        },
        fail: (err) => {
          console.error('请求失败:', err);
          uni.showToast({
            title: "请求失败，请检查网络",
            icon: "none",
          });
        }
      });
    },
    sendCode() {  
      uni.request({
        url:'http://localhost:8080/app/sendCode',
        method:'POST',
        data:{phone: this.user.phone},
        success:(res)=>{
          if(res.statusCode!=200){
            uni.showToast({
            title: "发送失败，请稍后再试",
            icon: "none",
          });
          }
        },
      })
    },
    onChooseAvatar(e) {
      console.log("detail", e.detail)
      this.user.avatarUrl = e.detail.avatarUrl;
    }, 
    goBack() {
      uni.reLaunch({
        url: "/pages/search/search",
      });
    },
  },
};
</script>
<style lang="scss">
/* 页面容器样式 */
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* 头像容器样式 */
.avatar-container {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  width: 230 rpx;
  height: 230 rpx;
}

/* 头像容器样式 */
.avatar-wrapper {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  margin-bottom: 10px
}

/* 头像样式 */
.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid #ccc;
  /* 为了更清楚地看到边界 */
}

/* 输入框容器样式 */
.input-container {
  display: flex;
  flex-direction: row;
  /* 行布局 */
  align-items: center;
  /* 垂直居中 */
  margin-bottom: 20px;
}

/* 发送按钮样式 */
.send-button {
  flex: 0 0 auto;
  /* 不增长，不缩小，保持内容基础大小 */
  padding: 10px;
  /* 增加一些内边距 */
  cursor: pointer;
  /* 鼠标悬停时显示指针 */
  user-select: none;
  /* 防止文本被选中 */
  min-width: 100px;
  /* 设置最小宽度 */
  text-align: center;
  /* 文本居中 */
}

/* 输入框样式 */
.input-phone,
.input-verify-code {
  flex: 1;
  /* 输入框填充剩余空间 */
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  height: 40px;
  /* 调整高度 */
  min-width: 0;
  /* 允许输入框缩小 */
}

/* 适配过长的文本 */
.input-phone {
  text-overflow: ellipsis;
  /* 超出部分显示省略号 */
  overflow: hidden;
  /* 隐藏超出的文本 */
  white-space: nowrap;
  /* 不换行 */
}

/* 登录按钮样式 */
.login-button {
  width: 50%;
  height: 88 rpx;
  line-height: 88 rpx;
  background-color: #1aad19;
  color: #ffffff;
  font-size: 58 rpx;
  border-radius: 10 rpx;
  margin-bottom: 60 rpx;
}

/* 返回文本样式 */
.back-text {

  display: flex;
  justify-content: center;
  /* 使子元素在主轴中心 */
  font-size: 28 rpx;
  color: #1aad19;
  text-align: center;
}
</style>